<template>
	<view class="container">
		<view class="register_bg">
			<image src="@/static/login/loginBgc.png" mode=""></image>
		</view>
		<view class="register_box">
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入您的账号" v-model="mobile">
			</view>
			<view class="register_item">
				<!-- <input type="text" disabled placeholder-class="inputPlaceholder" placeholder="请选择问题" v-model="key"> -->
				<picker :range="selectList" @change="changeValue">
					<!-- <input type="text" placeholder-class="inputPlaceholder" placeholder="请选择问题" v-model="key"> -->
					<view class="inputPlaceholder" :style="key?'color:#333':''">{{key?key:"请选择问题"}}</view>
				</picker>
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入答案" v-model="value">
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入您的登录密码" v-model="pwd">
			</view>
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请再次输入您的登录密码" v-model="repwd">
			</view>
			<button class="register_button" @click="toLogin" :disabled="logining">
				找回密码
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				mobile: '',
				truename: '',
				code: '',
				key: '',
				value: '',
				logining: false,
				selectList: [],
				pwd: "",
				repwd: "",
				tip: '发送验证码',
				timer: null,
				event: 'register',
				config: 0,
				configObj: {},
				disabled: false
			}
		},
		onLoad(Option) {
			if (Option.invitation) {
				this.invitation = Option.invitation
				this.disabled = true
			}
		},
		onShow() {
			this.$fun.ajax.post('config/gettitle', {}).then(res => {
				this.selectList = res.data
			})
		},
		methods: {
			...mapMutations(['login']),
			changeValue(e) {
				this.key = this.selectList[e.detail.value]
			},
			sendCode() {
				if (this.tip == '发送验证码') {
					this.tip = 60;
					this.timer = setInterval(() => {
						if (this.tip <= 0) {
							this.tip = '发送验证码'
							clearInterval(this.timer)
							this.timer = null
						} else {
							this.tip -= 1
						}
					}, 1000)
				}
			},
			gotoApp() {
				location.href = this.configObj.download_address
			},
			async getCode() {

				const {
					mobile,
					event
				} = this;

				const sendData = {
					mobile,
					event
				};

				if (!mobile) {
					this.$fun.msg('请输入手机号');
					return
				}

				const code = await this.$fun.ajax.post('sms/send', sendData);
				if (code.code === 1) {
					this.$fun.msg('发送成功');
					this.sendCode();
				} else {
					this.$fun.msg(code.data.msg ? code.data.msg : '发送失败');
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				this.$fun.jump('./login', 3, 0)
			},
			async toLogin() {
				const that = this
				const {
					key,
					value,
					mobile,
					pwd,
					repwd
				} = this;
				const sendData = {
					key,
					value,
					mobile,
					pwd,
					repwd
				};
				//console.log(sendData)
				// 手机号为空
				if (!mobile) {
					this.$fun.msg('请输入手机号');
					return
				}
				// 密码为空
				if (!key) {
					this.$fun.msg('请选择密保问题');
					return
				}
				//验证码为空
				if (!value) {
					this.$fun.msg('请输入密保答案');
					return
				}
				//登录密码
				if (!pwd) {
					this.$fun.msg('请输入登录密码');
					return
				}
				//交易密码
				if (!repwd) {
					this.$fun.msg('请输入确认登录密码');
					return
				}
				if (pwd != repwd) {
					this.$fun.msg('两次密码不一致');
					return
				}

				this.logining = true;

				const result = await this.$fun.ajax.post('user/repwd', sendData);
				if (result.code == 1) {
					this.$fun.msg(result.msg);
					that.$fun.jump('/pages/index/index', 3, 1200)
				} else {
					this.logining = false;
				}
			}
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null
		}

	}
</script>

<style lang='scss'>
	.container {
		width: 100vw;
		height: 100vh;

		.register_bg {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.register_box {
			margin: 20upx 75upx;
			position: absolute;
			top: 40%;
			left: 0;
			right: 0;

			.register_item {
				position: relative;
				margin-top: 30upx;
				width: 100%;
				height: 80upx;
				background: #F6F6F6;
				border: 2upx solid #BFBFBF;
				border-radius: 40upx;
				padding: 20upx 40upx;
				box-sizing: border-box;

				input {
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}

				.inputPlaceholder {
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCCCCC;
				}

				.code {
					position: absolute;
					top: 25upx;
					right: 40upx;
					font-size: 24upx;
				}
			}

			.register_button {
				margin-top: 100upx;
				width: 100%;
				height: 80upx;
				background: #0066FF;
				border-radius: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}
		}

		.register-section {
			position: absolute;
			left: 0;
			bottom: 50upx;
			width: 100%;
			font-size: $font-sm+2upx;
			color: $font-color-base;
			text-align: center;

			text {
				color: #FE555A;
				margin-left: 10upx;
			}
		}
	}
</style>